<template>
	<view class="content">
		<view v-if="!$status" class="switch switch1" @click="$to('/pages/shoot/list')"><u-icon name="grid" style="margin: auto;"></u-icon></view>
		<view v-if="!$status" class="switch switch2" @click="$to('/pages/shoot/add')"><u-icon name="plus" style="margin: auto;"></u-icon></view>
		<view v-show="showView">
			<map
				v-if="showMap"
				scale="13"
				:longitude="map.longitude"
				:latitude="map.latitude"
				style="width: 100vw; height: 100vh;"
				:markers="markers"
				:show-location="true"
				@markertap="clickMarker"
				@labeltap="clickMarker"
				:enable-satellite="satellite"
				@tap="clickMap"
			></map>
		</view>
		<u-popup v-model="show" mode="bottom" closeable>
			<view class="popup_view">
				<view class="title">{{ click_info.title }}</view>
				<view class="notes">
					<view class="note_item note_img"><image class="img" :src="click_info.imgs[0]" mode="widthFix"></image></view>
					<view class="note_item">发布人：{{ click_info.name }}</view>
					<view class="note_item">发布时间：{{ click_info.create_time }}</view>
				</view>
				<view class="btn"><u-button type="success" @click="$to('/pages/shoot/info?id=' + click_info.id)">进入</u-button></view>
			</view>
		</u-popup>
	</view>
</template>
<!-- :include-points="markers" -->
<script>
import { shoot_map, shoot_map_find } from '@/api/index.js';
export default {
	data() {
		return {
			showView: true,
			showMap: false,
			markers: [],
			map: {
				longitude: '', //经度
				latitude: '' //纬度
			},
			satellite: false, //是否开启卫星图
			show: false,
			click_info: {}
		};
	},
	onLoad() {
		uni.showLoading({
			title: '加载地图中'
		});

		uni.getLocation({
			type: 'gcj02',
			success: res => {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				this.map = {
					longitude: res.longitude,
					latitude: res.latitude
				};
				this.showMap = true;
				uni.hideLoading();
			},
			fail(e){
				console.log(e);
			}
		});
		uni.$on('update_map', () => {
			this.getList();
		});
	},
	methods: {
		getList() {
			shoot_map().then(res => {
				this.markers = res.data.map(item => {
					return {
						id: item.id,
						width: 35,
						height: 35,
						latitude: item.latitude,
						longitude: item.longitude,
						iconPath: item.outimg,
						label: {
							bgColor: '#fff',
							content: item.title,
							padding: '4',
							textAlign: 'center',
							borderRadius: '5',
							anchorY: 5
						}
						// iconPath: this.$API + '/img/map/point.png'
					};
				});
			});
		},
		clickMap(e) {
			//点击地图事件
		},
		clickMarker(e) {
			console.log(e, '点击marker标记点事件');
			if (e.markerId) {
				shoot_map_find(e.markerId).then(res => {
					console.log(res);
					if (res.code == 200) {
						var data = res.data;
						data.imgs = data.imgs.split(',');
						this.click_info = data;
						this.show = true;
					} else {
						uni.showToast({
							title: '获取信息失败！',
							icon: 'error'
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	position: relative;

	.switch {
		position: fixed;
		right: 20rpx;
		z-index: 10;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		background: linear-gradient(#34e7e4, #00d8d6);
		border-radius: 50rpx;
		font-size: 34rpx;
		color: #fff;
	}
	.switch1 {
		top: 20rpx;
		z-index: 10;
		background: linear-gradient(#34e7e4, #00d8d6);
	}
	.switch2 {
		top: 100rpx;
		z-index: 10;
		background: linear-gradient(#ff7f50, #ff6348);
	}
	.popup_view {
		padding: 25rpx 25rpx 30rpx;
		.title {
			padding-bottom: 20rpx;
			font-size: 34rpx;
			font-weight: 600;
		}
		.notes {
			padding-bottom: 10rpx;
			max-height: 70vh;
			overflow-y: auto;
			margin-bottom: 20rpx;
			.note_item {
				padding: 10rpx 0;
				&.note_img {
					width: 100%;
					font-size: 0;
					.img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
		.btn {
		}
	}
}
</style>
